<script>
/**
 * @desc 选择时间段的遮罩层
 */

export default {
  name: 'time-select-cover',

  props: {
    show: {
      type: Boolean,
      default: false
    },
    timeLevel: {
      type: Number,
      default: 1
    },
    year: {
      type: Number,
      default: 0
    },
    month: {
      type: Number,
      default: 0
    },
    handleShow: {
      type: Function,
      default: () => {}
    },
    handleYear: {
      type: Function,
      default: () => {}
    },
    handleMonth: {
      type: Function,
      default: () => {}
    }
  },

  data() {
    return {
      currYear: new Date().getFullYear(),
      selectYear: this.year,
      selectMonth: this.month
    }
  },

  methods: {
    onYearClick(year) {
      this.selectYear = year
    },

    onMonthClick(month) {
      this.selectMonth = month
    },

    onCancel() {
      this.selectYear = this.year
      this.selectMonth = this.month
      this.handleShow(false)
    },

    onConfirm() {
      this.handleYear(this.selectYear)
      this.handleMonth(this.selectMonth)
      this.handleShow(false)
    }
  }
}
</script>

<template>
  <div :class="show ? $sty.selectListWrapActive : $sty.selectListWrapNormal">
    <div :class="show ? $sty.contentActive : $sty.contentNormal">
      <view :class="$sty.confirmBar">
        <text
          :class="$sty.btnCancel"
          @click="onCancel"
        >取消</text>
        <text
          :class="$sty.btnConfirm"
          @click="onConfirm"
        >确定</text>
      </view>

      <view :class="$sty.listWrap">
        <block>
          <scroll-view
            :class="$sty.list"
            :scroll-y="true"
          >
            <p
              :class="selectYear===currYear-i ? $sty.itemActive : $sty.itemNormal"
              :key="i"
              @click="onYearClick(currYear-i)"
              v-for="(v,i) in 3"
            >{{currYear-i}} 年</p>
          </scroll-view>
        </block>

        <block v-if="timeLevel">
          <scroll-view
            :class="$sty.list"
            :scroll-y="true"
          >
            <p
              :class="i===selectMonth ? $sty.itemActive : $sty.itemNormal"
              :key="i"
              @click="onMonthClick(i)"
              v-for="(v,i) in 12"
            >{{i+1}} 月</p>
          </scroll-view>
        </block>
      </view>
    </div>
  </div>
</template>

<style lang="scss" module>
%selectListWrapBase {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  background-color: rgba(#000, 0.75);
  transition: all 0.25s;
}

.selectListWrapNormal {
  @extend %selectListWrapBase;
  visibility: hidden;
  opacity: 0;
}

.selectListWrapActive {
  @extend %selectListWrapBase;
  visibility: visible;
  opacity: 1;
}

%contentBase {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50vh;
  padding: $content-box-padding;
  border-radius: $box-radius $box-radius 0 0;
  background-color: #fff;
  transition: all 0.25s;
}

.contentNormal {
  @extend %contentBase;
  transform: translateY(100%);
}

.contentActive {
  @extend %contentBase;
  transform: translateY(0);
}

.confirmBar {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 10px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.2;
  border-bottom: 2px solid $main-gray;
}

.btnCancel {
  color: $font-gray;
}

.btnConfirm {
  color: $main-red;
}

.listWrap {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

.list {
  flex: 1;
  overflow-y: scroll;
}

%itemBase {
  position: relative;
  margin: 0 2px;
  line-height: 3;
  color: $article-color;

  &::before {
    position: absolute;
    top: 50%;
    left: 10px;
    display: block;
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: $main-red;
    transform: translateY(-50%);
    transition: all 0.25s;
  }
}

.itemNormal {
  @extend %itemBase;
  &::before {
    visibility: hidden;
    opacity: 0;
  }
}

.itemActive {
  @extend %itemBase;
  color: $main-red;
  &::before {
    visibility: visible;
    opacity: 1;
  }
}
</style>
